<template>
  <div class="order-list">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      :error.sync="loadError"
      @load="onLoad"
    >
      <van-card
        v-for="(item,i) in list"
        :key="i"
        :desc="item | orderDesc"
        :title="item.sh_shop.shop_name"
        :price="item.order_money"
      >
        <van-button color="#f93e2e" slot="footer" @click="showOrder(item)">查看订单</van-button>
      </van-card>
    </van-list>
    <!-- 订单详情弹出层 -->
    <van-popup v-model="orderShow" position="bottom" :style="{ height: '100%' }">
      <order-detail
        v-if="orderShow"
        :order="currentOrder"
        @close="orderClose"
      />
    </van-popup>
  </div>
</template>

<script>
import { getOrderList } from '@/api/order'
import orderDetail from './order-detail'
export default {
  name: 'OrderList',
  components: {
    // OrderItem
    orderDetail
  },
  props: {
    status: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      loading: false,
      finished: false,
      loadError: false,
      // 订单列表数据
      list: [],
      // 当前页数
      pageNum: 1,
      // 订单详情弹出层开关
      orderShow: false,
      // 当前订单
      currentOrder: {}
    }
  },
  created () {

  },
  mounted () {

  },
  watch: {
    status() {
      this.list = []
      // this.loading = false
      this.finished = true
      this.pageNum = 1
      this.onLoad()
    }
  },
  filters: {
    // 订单描述
    orderDesc(order) {
      var str = ''
      order.sh_goods_goodsorders.forEach((good, i) => {
        try {
          if (i === 2) {
            str += `等${order.sh_goods_goodsorders.length}件商品`
            return str
          }
          if (i > 2) return
          str += `${good.sh_good.goods_name} × ${good.goods_amount}   `
        } catch (error) {
          console.log('有商品被删除')
        }
      })
      return str
    }
  },
  methods: {
    // 订单详情被关闭
    orderClose() {
      this.orderShow = false
      this.list = []
      this.pageNum = 1
      this.onLoad()
    },
    // 查看订单详情
    showOrder(order) {
      this.currentOrder = order
      this.orderShow = true
    },
    // 获取订单列表
    async onLoad() {
      const { data: res } = await getOrderList({
        order_state: this.status,
        pageNum: this.pageNum,
        pageSize: 10
      })
      if (res.meta.status !== 200) {
        this.$toast(res.meta.msg)
        this.loadError = true
        return
      }
      this.list.push(...res.data.rows)
      this.loading = false
      if (res.data.rows.length) {
        this.pageNum++
      } else {
        this.finished = true
      }
    }
  }
}
</script>

<style scoped lang="less">
// .order-list {
//   height: 89vh;
//   overflow-y: auto;
// }
.van-button {
  font-size: 20px;
  width: 150px;
  height: 50px;
  padding-left: 0;
  padding-right: 0;
}
.van-card__desc{
  margin-top: 40px;
  max-width: 500px;
  font-size: 25px;
}
</style>
